<template>
	<view class="content" :style="{background:$store.state.bgPrimaryColor}">
		<view class="text_body">
			<text class="text1">登录约课</text>
			<text class="text4">发现更大的世界</text>
		</view>
		<button class="login" @click="goToLoginH5">微信登录</button>
		<button class="_back" @click="linkUrl('/pages/Login/login')">手机登录</button>
		<view class="_check">
			<checkbox-group @change="checkbox">
				<label>
					<checkbox value="t" :checked="isShow" color="#FE7000" style="transform:scale(0.7)" />
					<text>登录/注册表示您同意<text style="color: #0052D9;">《用户协议》</text>和<text
							style="color: #0052D9;">《隐私政策》</text></text>
				</label>
			</checkbox-group>
		</view>
		<u-popup :show="iSshow" @close="iSshow = false" @open="iSshow = true" mode="bottom" :closeable="false"
			:round="50">
			<view class="popupBody">
				<view class="headersBody">
					<text>约课|申请使用</text>
					<u-icon name="close" color="#888888" size="20" @click="iSshow = false"></u-icon>
				</view>
				<text class="phone_name">你的手机号码</text>
				<view class="qrcode">
					<view>
						<text>18888888888</text>
						<text>微信绑定号码</text>
					</view>
					<u-icon name="checkbox-mark" color="#277ffe" size="20" @click="iSshow = false"></u-icon>
				</view>
				<view class="buttonFlex">
					<button class="leftButton">拒绝</button>
					<button class="rightButton">允许</button>
				</view>
			</view>
		</u-popup>
	</view>
</template>
<script>
	import {
		wxPhoneLogin,
		redirectUrl
	} from '../../api/login.js';
	export default {
		data() {
			return {
				iSshow: false,
				//用户登录类型
				adminType: 'login',
				//是否同意用户隐私政策协议
				isShow: false,
				//验证码倒计时
				second: 0,
				showText: false
			}
		},
		onLoad(e) {
			if (e.shop_id) {
				uni.setStorageSync('shop_id', e.shop_id);
			}
			// this.redirectUrl();
		},
		methods: {
			/** 
			@method 用户隐私框
			**/
			checkbox(e) {
				console.log(e);
			},
			goToLoginH5() {
				let _this = this;
				uni.showModal({
					title: '提示',
					content: '需要小程序授权',
					success: (res) => {
						if (res.confirm) {
							_this.getWeChatCode();
						} else if (res.cancel) {
							uni.showToast({
								title: '未授权',
								icon: 'none'
							})
						}
					}
				});
			},
			//请求微信接口，用来获取code
			getWeChatCode() {
				let code = this.getUrlCode('code')
				if (code == null) {
					this.redirectUrl();
				} else {
					this.sendCode(code)
				}
			},
			//方法:用来提取code
			getUrlCode(name) {
				return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location
				.href) || [, ''
				])[1].replace(/\+/g, '%20')) || null
			},
			getpower() {
				let local = encodeURIComponent(window.location.href); //获取当前页面地址作为回调地址
				let appid = '';
				window.location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' + appid +
					'&redirect_uri=' + local + '&response_type=code&scope=snsapi_userinfo&state=1#wechat_redirect'
			},
			sendCode(code) {
				console.log('打印code');
				console.log(code);
			},
			/**
			@method 微信授权手机号登录
			**/
			async wxPhoneLogin() {
				try {
					// if(!this.isShow){
					// 	uni.showToast({
					// 	    title: '请先阅读并勾选《用户协议》《隐私政策》协议！',
					// 	    icon: 'none',
					// 	    duration: 2000
					// 	});
					// 	return false;
					// }
					const res = await wxPhoneLogin({
						code: '111'
					});
					if (res?.data) {
						uni.setStorageSync('token', res.data.userinfo.token);
						uni.reLaunch({
							url: '/pages/Tabbar/Home/Home'
						});
					}
				} catch (err) {
					//TODO handle the exception
					console.log(err);
				}
			},
			/**
			@method 公众号授权登录
			**/
			async redirectUrl() {
				try {
					const res = await redirectUrl();
					if (res?.data) {
						window.location.href = res.data;
					}
				} catch (err) {
					//TODO handle the exception
					console.log(err);
				}
			},
			/**
			@method 保存密码到本地,读取则放在onShow函数使用uni.getStorageSync()读取本地账号密码
			**/
			user(e) {
				e.detail.value.length > 0 ? uni.setStorageSync('key', '存储的账号密码数据源') : uni.removeStorage({
					key: '要删除的数据源key'
				});
			},
			linkUrl(e) {
				uni.navigateTo({
					url: e
				});
			},
			/**
			@method 验证码开始倒计时 setTimeout设置到时时间1000 == 1秒
			**/
			start() {
				this.second = 10;
				this.showText = true;
				var interval = setInterval(() => {
					--this.second
				}, 1000)
				setTimeout(() => {
					clearInterval(interval)
					this.showText = false;
				}, 10000);
			}
		}
	}
</script>
<style lang="scss" scoped>
	button::after {
		border: none;
	}

	//是否刘海屏
	.content {
		width: 100%;
		padding-top: 120rpx;

		.text_body {
			width: 100%;
			margin-bottom: 150rpx;

			text {
				font-family: PingFangSC, PingFang SC;
				font-weight: 600;
				font-size: 54rpx;
				color: #333333;
			}

			.text1 {
				display: block;
			}

			.text4 {
				margin-top: 10rpx;
				display: block;
			}
		}

		._b {
			width: 60%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin: 0px auto;
			margin-top: 120rpx;
			margin-bottom: 50rpx;

			text {
				font-size: 30rpx;
				padding-bottom: 15rpx;
			}
		}

		.login {
			width: 100%;
			height: 84rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 50rpx;
			margin: 0px auto;
			outline: none;
			background: linear-gradient(270deg, #3078FF 0%, #009DFE 100%);
			color: #fff;
			font-size: 30rpx;
			margin-bottom: 40rpx;
		}

		.passworld {
			display: block;
			margin: 0px auto;
			text-align: center;
			margin-top: 20rpx;
			font-weight: 500;
			font-size: 28rpx;
			color: #333;
		}

		._check {
			width: auto;
			display: flex;
			justify-content: center;

			text {
				font-size: 24rpx;
				color: #919191;
			}
		}

		._user {
			font-size: 26rpx;
			display: flex;
			align-items: center;
		}

		._back {
			width: 100%;
			height: 84rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 50rpx;
			margin: 0px auto;
			outline: none;
			background: rgba(37, 121, 254, 0.15);
			color: #0052D9;
			font-size: 30rpx;
			margin-bottom: 40rpx;
		}

		.popupBody {
			.headersBody {
				display: flex;
				justify-content: space-between;
				background-color: #ebf7ff;
				padding: 30rpx;
				border-top-left-radius: 30rpx;
				border-top-right-radius: 30rpx;

				text {
					font-family: PingFangSC, PingFang SC;
					font-weight: 600;
					font-size: 32rpx;
					color: #202020;
				}
			}

			.phone_name {
				display: block;
				font-size: 31rpx;
				margin-left: 30rpx;
				margin-top: 20rpx;
			}

			.qrcode {
				width: 95%;
				margin: 0px auto;
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 40rpx;

				view {

					//margin-left:20rpx;
					text {
						margin-left: 10rpx;
					}
				}
			}

			.buttonFlex {
				margin-top: 50rpx;
				margin-bottom: 50rpx;
				display: flex;
				align-items: center;
				justify-content: space-around;

				.leftButton {
					width: 40%;
					height: 75rpx;
					margin: 0px;
					background-color: #efefef;
					color: #333;
					display: flex;
					justify-content: center;
					align-items: center;
					border-radius: 50rpx;
					font-size: 28rpx;
					letter-spacing: 2rpx;
				}

				.rightButton {
					width: 40%;
					height: 75rpx;
					margin: 0px;
					background-color: #277ffe;
					color: #fff;
					display: flex;
					justify-content: center;
					align-items: center;
					border-radius: 50rpx;
					font-size: 28rpx;
					letter-spacing: 2rpx;
				}
			}
		}
	}
</style>